// 小程序页面入口为 Page({ })
Page({
  // 初始数据
  data: {
    friut: '',
    list: [
      { id: 1, name: '西瓜' },
      { id: 2, name: '苹果' },
      { id: 3, name: '香蕉' },
    ]
  },
  // 添加水果
  handleAdd() {
    // console.log('测试事件触发了吗',this.data.friut);
    // 1. 通过解构获取数据
    const { friut, list } = this.data
    // 🔔添加前重复项判断，通过 findIndex/find 查找重复项
    const index = list.findIndex(v => v.name === friut)
    // 如果能查找到，表示重复，提示用户
    if (index > -1) {
      // wx.showToast()   小程序的API，消息提示框
      wx.showToast({ title: '重复了', icon: 'none', });
      // 退出函数
      return
    }
    // 2. 通过 setData 函数更新数据
    this.setData({
      // ❌错误写法：push方法返回数组长度
      // list:  list.push({ id: Date.now(), name: friut })
      // ✅正确写法
      list: [{ id: Date.now(), name: friut }, ...list],
      friut: ''
    })
  },

  // 删除水果
  handleDel(e) {
    // 解构获取 id 参数
    const { id } = e.target.dataset
    // console.log(id);
    // 解构获取 list 列表
    const { list } = this.data

    // splice 方法：返回删除项，不能直接 setDate 更新
    // const index = list.findIndex(v => v.id === id)
    // list.splice(index, 1)
    // this.setData({
    //   list: list
    // })

    this.setData({
      // filter 方法：返回过滤后的新数组，可直接用于 setDate 更新
      list: list.filter(v => v.id !== id)
    })

  },
  // 主要是早期的小程序没有双向绑定，需要通过 bindinput 绑定事件
  // 现在的已经支持简单双向绑定，警告其实是多余的
  // PS: 如果不想看到警告，可绑定 bindinput 事件消除警告🥲
  handleInput() { }
})
